<header>
    接口文档
</header>
<h2>
    配置画笔
</h2>
<h3>
    可配置项
</h3>
<pre tag="javascript">
painter.config({
    // 填充色或图案
    "fillStyle": 'black',

    // 轮廓色或图案
    "strokeStyle": 'black',

    // 线条宽度(单位px，下同)
    "lineWidth": 1,

    // 文字水平对齐方式（"left"左对齐、"center"居中和"right"右对齐）
    "textAlign": 'left',

    // 文字垂直对齐方式（"middle"垂直居中、"top"上对齐和"bottom"下对齐）
    "textBaseline": 'middle',

    // 设置线条虚线，应该是一个数组[number,...]
    "lineDash": [],

    // 文字大小
    "fontSize": 16,

    // 字体，默认"sans-serif"
    "fontFamily": "sans-serif",

    // 圆弧开始端闭合方式（"butt"直线闭合、"round"圆帽闭合、"-round"反圆帽闭合）
    "arcStartCap": 'butt',

    // 圆弧结束端闭合方式，和上一个类似
    "arcEndCap": 'butt'
});
</pre>
<div class="version">
    丰富日志
    <hr />
    <ul>
        <li>
            arcStartCap的-round 0.3.0 新增
        </li>
    </ul>
</div>
<h3>
    渐变色
</h3>
<div class="version">
    0.5.2 新增
</div>
<p>
    上述配置颜色的地方，除了可以配置纯色外，还可以使用下面的渐变色。
</p>
<h4>
    线性渐变
</h4>
<p>
    使用画笔的createLinearGradient创建线性渐变对象，四个参数分别表示渐变的起点P(x1, y1)和终点P(x2, y2)：
</p>
<pre tag="javascript">
    let gradient = painter.createLinearGradient(x1, y1, x2, y2)
</pre>
<div class="warn">
    温馨提示：画笔上述参数的单位是%（下同）。
</div>
<h4>
    环形渐变
</h4>
<p>
    使用画笔的createRadialGradient创建环形渐变对象，三个参数分别表示渐变的圆心P(cx, cy)和半径r：
</p>
<pre tag="javascript">
    let gradient = painter.createRadialGradient(cx, cy, r1, r2)
</pre>
<div class="warn">
    温馨提示：渐变的起点是圆心。
</div>
<h4>
    设置与使用
</h4>
<p>
    设置渐变范围以后，你需要在渐变范围中添加渐变色，可以添加任意多个：
</p>
<pre tag="javascript">
    gradient.setColor(deep, color)
</pre>
<p>
    上述deep取值为闭区间[0, 1]，color可以是任意合法的颜色值。
</p>
<p>
    渐变如何使用，直接调用渐变的value方法即可：
</p>
<pre tag="javascript">
painter.config({
    "fillStyle": gradient.value()
})
</pre>
<p>
    如上面，我们给画笔设置填充色就是使用了我们刚刚获取的渐变色。
</p>
<h2>
    基础方法
</h2>
<h3>
    标记应用节点
</h3>
<pre tag="javascript">painter.useEl(el)</pre>
<h3>
    获取当前应用的节点
</h3>
<pre tag="javascript">let el = painter.getEl()</pre>
<h3>
    追加节点
</h3>
<pre tag="javascript">painter.appendEl(el, context)</pre>
<ul>
    <li>
        el：必输，节点或字符串，字符串的话表示节点名称；
    </li>
    <li>
        context：可选，节点，表示追加位置，默认根svg。
    </li>
</ul>
<h3>
    追加绘制板
</h3>
<pre tag="javascript">painter.appendBoard(el, context)</pre>
<ul>
    <li>
        el：必输，节点或字符串，字符串的话表示需要绘制对应什么内容；
    </li>
    <li>
        context：可选，节点，表示追加位置，默认根svg。
    </li>
</ul>
<h3>
    删除当前维护的节点
</h3>
<pre tag="javascript">painter.remove()</pre>
<h3>
    设置或获取节点属性
</h3>
<pre tag="javascript">painter.attr(params)</pre>
<h3>
    绑定事件
</h3>
<pre tag="javascript">painter.bind(eventType, callback)</pre>
<h2>
    画笔方法
</h2>
<h3>
    文字
</h3>
<p>
    在点(x, y)处绘制填充的文字text；deg表示文字旋转角度，可选：
</p>
<pre tag="javascript">painter.fillText(text, x, y, deg)</pre>
<div class="warn">
    除非特别说明，角度全部采用角度制。
</div>
<p>
    在点(x, y)处绘制轮廓的文字text；deg表示文字旋转角度，可选：
</p>
<pre tag="javascript">painter.strokeText(text, x, y, deg)</pre>
<p>
    在点(x, y)处绘制轮廓并填充的文字text；deg表示文字旋转角度，可选：
</p>
<pre tag="javascript">painter.fullText(text, x, y, deg)</pre>
<h3>
    弧
</h3>
<p>
    以(cx, cy)为圆心，内外半径分别是r1和r2，从角度beginDeg开始，跨越角度deg，绘制填充圆弧：
</p>
<pre tag="javascript">painter.fillArc(cx, cy, r1, r2, beginDeg, deg)</pre>
<p>
    和fillArc方法类似，只不过绘制的是轮廓圆弧：
</p>
<pre tag="javascript">painter.strokeArc(cx, cy, r1, r2, beginDeg, deg)</pre>
<p>
    和fillArc方法类似，只不过绘制的是轮廓并填充圆弧：
</p>
<pre tag="javascript">painter.fullArc(cx, cy, r1, r2, beginDeg, deg)</pre>
<h3>
    圆形
</h3>
<p>
    以(cx, cy)为圆心，半径r绘制填充圆形：
</p>
<pre tag="javascript">painter.fillCircle(cx, cy, r)</pre>
<p>
    以(cx, cy)为圆心，半径r绘制轮廓圆形：
</p>
<pre tag="javascript">painter.strokeCircle(cx, cy, r)</pre>
<p>
    以(cx, cy)为圆心，半径r绘制轮廓并填充圆形：
</p>
<pre tag="javascript">painter.fullCircle(cx, cy, r)</pre>
<h3>
    矩形
</h3>
<p>
    以(x, y)为左上角，宽width，高height绘制填充矩形：
</p>
<pre tag="javascript">
    painter.fillRect(x, y, width, height);
</pre>
<p>
    以(x, y)为左上角，宽width，高height绘制轮廓矩形：
</p>
<pre tag="javascript">painter.strokeRect(x, y, width, height)</pre>
<p>
    以(x, y)为左上角，宽width，高height绘制轮廓并填充矩形：
</p>
<pre tag="javascript">painter.fullRect(x, y, width, height)</pre>
<h3>
    路径
</h3>
<p>
    基于路径可以绘制几乎大部分图形，非常类似画笔在纸上划动。
</p>
<p>
    开始一段独立的路径：
</p>
<pre tag="javascript">painter.beginPath()</pre>
<p>
    闭合当前路径，也就是路径首尾闭合：
</p>
<pre tag="javascript">painter.closePath()</pre>
<p>
    画笔移动到点(x, y)，此时笔离开了画布：
</p>
<pre tag="javascript">painter.moveTo(x, y)</pre>
<p>
    画笔移动到点(x, y)，此时笔没有离开画布：
</p>
<pre tag="javascript">painter.lineTo(x, y)</pre>
<p>
    以(cx, cy)为圆心，半径r，从角度beginDeg开始，跨越角度deg画弧，此时笔没有离开画布：
</p>
<pre tag="javascript">painter.arc(cx, cy, r, beginDeg, deg)</pre>
<p>
    二次贝塞尔曲线到：
</p>
<pre tag="javascript">painter.quadraticCurveTo(cpx, cpy, x, y)</pre>
<div class="warn">
    只有一个控制点p(cpx, cpy),画笔当前的位置和p(x, y)分别是起点和终点。
</div>
<p>
    三次贝塞尔曲线到：
</p>
<pre tag="javascript">painter.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</pre>
<div class="warn">
    有两个控制点p(cp1x, cp1y)和p(cp2x, cp2y),画笔当前的位置和p(x, y)分别是起点和终点。
</div>
<p>
    把当前路径包裹的区域填充颜色：
</p>
<pre tag="javascript">painter.fill()</pre>
<p>
    把当前路径上色（轮廓线）：
</p>
<pre tag="javascript">painter.stroke()</pre>
<p>
    把当前路径画上轮廓线并填充颜色到当前路径所包裹的区域：
</p>
<pre tag="javascript">painter.full()</pre>